<template>
    <div class="works">
        <div class="container">
            <div class="text-center">
                <h1>Works</h1>
            </div>
            <div class="row">
                <div class="col-sm-4 hidden-xs">
                    <div class="workimg">
                        <img src='../assets/img/niupai.png' class="img-responsive center-block ">
                        <div class="worktext">
                        <h3 style="float:left;margin: 0.4rem 0 1rem 0">牛排餐厅</h3><a  target="_blank" href=" https://broken-life.gitee.io/niupai"><img class="works_a" src="../assets/img/right-circle.png" width="8%" style="float:right;border: none;padding: 0"></a>
                        <div class="worktextSkill">
                        <p>技术栈：#HTML #CSS #JS #JQ</p>
                        <p>PC端</p>
                        </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="workimg">
                            <img src='../assets/img/coffce.png' class="img-responsive center-block ">
                        <div class="worktext">
                                <h3 style="float:left;margin: 0.3rem 0 1rem 0">咖啡店网站</h3><a  target="_blank" href=" https://broken-life.gitee.io/coffeeshop "><img class="works_a" src="../assets/img/right-circle.png" width="8%" style="float:right;border: none;padding: 0"></a>
                                <div class="worktextSkill">
                                        <p>技术栈：#HTML #CSS #JQ</p>
                                        <p>PC端</p>
                                        </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="workimg">
                            <img src='../assets/img/jianliv1.png'  class="img-responsive center-block ">
                        <div class="worktext">
                                <h3 style="float:left;margin: 0.3rem 0 1rem 0">个人简历V1.0</h3><a  target="_blank" href="https://broken-life.gitee.io/zwj_resume"><img class="works_a" src="../assets/img/right-circle.png" width="8%" style="float:right;border: none;padding: 0"></a>
                                <div class="worktextSkill">
                                        <p>技术栈：#HTML #CSS #JS #JQ</p>
                                        <p>PC端</p>
                                        </div>
                        </div>
                    </div>
                </div>
                </div>
                <div class="row">
                <div class="col-sm-4 hidden-xs">
                    <div class="workimg">
                            <img src='../assets/img/gtie.png'  class="img-responsive center-block ">
                        <div class="worktext">
                                <h3 style="float:left;margin: 0.3rem 0 1rem 0">钢铁企业官网</h3><a  target="_blank" href="https://broken-life.gitee.io/steel"><img class="works_a" src="../assets/img/right-circle.png" width="8%" style="float:right;border: none;padding: 0"></a>
                                <div class="worktextSkill">
                                        <p>技术栈：#HTML #CSS #JS #JQ #bootstrap</p>
                                        <p>PC端、移动端</p>
                                        </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 hidden-xs">
                        <div class="workimg">
                                <img src='../assets/img/qy.png'  class="img-responsive center-block ">
                            <div class="worktext">
                                    <h3 style="float:left;margin: 0.3rem 0 1rem 0">Bootstrappin企业网站</h3><a  target="_blank" href="https://broken-life.gitee.io/bootstrap_enterprise"><img class="works_a" src="../assets/img/right-circle.png" width="8%" style="float:right;border: none;padding: 0"></a>
                                    <div class="worktextSkill">
                                            <p>技术栈：#HTML #CSS #JQ #bootstrap #less</p>
                                            <p>PC端、移动端</p>
                                            </div>
                            </div>
                        </div>
                    </div>
                <div class="col-sm-4">
                    <div class="workimg">
                            <img src='../assets/img/jlv2.png' class="img-responsive center-block ">
                        <div class="worktext">
                                <h3 style="float:left;margin: 0.3rem 0 1rem 0">个人简历V2.0</h3><a  target="_blank" href="/"><img class="works_a" src="../assets/img/right-circle.png" width="8%" style="float:right;border: none;padding: 0"></a>
                                <div class="worktextSkill">
                                        <p>技术栈：#HTML #CSS #ES6 #bootstrap #Vue</p>
                                            <p>PC端、移动端</p>
                                        </div>
                        </div>
                    </div>
                </div>
                

            </div>
       
        </div>
     </div>
  </template>
  
  <script>
  export default {
    name: 'works',
    data () {
      return {
       
      }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
      
      .More_works{
        font-family:华文细黑,STHeiti,MingLiu;
        margin: 10px;
        padding: 5px;
        box-shadow:  0px 0px 5px #c8c8c8 ;
        border-radius:5px; 
      }
      .More_works:hover{
          background-color: #63B8FF;
          -webkit-transition: all 2s ;
            -moz-transition:  all 2s;
            transition: all 2s;
      }
      .worktextSkill{
        clear: both;
        margin:0 0.3rem;
        padding-bottom: 2rem;
        font-size: 1.5rem;
        color: #858585;
        
      }
      .works_a{
          margin: 0.3rem 0;
          -webkit-transition: -webkit-transform 0.4s ease-out;
            -moz-transition: -moz-transform 0.4s ease-out;
            transition: transform 0.4s ease-out;

      }
      .works_a:hover{
        -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            transform: rotate(360deg);

      }
      .workimg{
        margin: 10px;
        padding: 10px;
        box-shadow:  0px 0px 5px #c8c8c8 ;
        border-radius: 5px;
      }
      .workimg:hover{
        margin: 15px 0 15px 0;
          padding: 10px;
          -webkit-transition: all 0.5s ;
            -moz-transition:  all 0.5s;
            transition: all 0.5s;

      }
      .workimg img{
        padding: 1.0rem 0;
        border-bottom:1.5px solid #202020
      }
      h1{
      margin-top: 4rem;
        font-size: 4rem;
        margin-bottom: 1rem;
    }
  </style>
  